<template>
	<view class="app">
		
		
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{data.total_price}}</text>
		</view>
		<view class="pay-type-list">


			<view  v-for="(item,index) in pagList" :class="[item.icon]" :key="index"  class="type-item b-b"
				@click="changePayType(item)" v-show="data.page!='zengzhiquan'">
				<text class="icon yticon" :class="[item.icon]"></text>
				<view class="con">
					<text class="tit">{{item.name}}</text>
					<text>{{item.subtitle}}</text>
				</view>
				<label class="radio">
					<!-- {{item.type}} -->
					<radio :value="item.type" :disabled="!item.enable" color="#fa436a"
						:checked='payType == item.type' />
					</radio>
				</label>
			</view>
			<!-- <view class="type-item b-b icon-qiyezhifu" @click="changePayType(5)" v-show="data.page!='zengzhiquan'">
				<text class="icon yticon icon-qiyezhifu"></text>
				<view class="con">
					<text class="tit">产品券支付</text>
					<text>推荐使用支付宝支付</text>
				</view>
				<label class="radio">
					<radio value="5"  color="#fa436a" :checked='payType == 5' />
					</radio>
				</label>
			</view> -->
			<view  v-for="(item,index) in pagList" class="type-item b-b" :class="[item.icon]"
				@click="changePayType(item)" v-show="data.page=='zengzhiquan'">
				<text class="icon yticon" :class="[item.icon]"></text>
				<view class="con">
					<text class="tit">{{item.name}}</text>
					<text>{{item.subtitle}}</text>
				</view>
				<label class="radio">
					
					<radio :value="item.type" :disabled="!item.enable" :checked="item.type==payType" color="#fa436a" />
					</radio>
				</label>
			</view>
		</view>

		<text class="mix-btn" @click="submit">确认支付</text>
		<paypass ref="yspay" @cancel="cancelpay" @submit="submitpay"></paypass>
		
		<view class="my-alert" :class="{'showflex':showflex}">
			{{xunhuantip}}
		</view>
	</view>
</template>

<script>
	//转意符换成普通字符  
	function escape2Html(str) {
		var arrEntities = {
			'lt': '<',
			'gt': '>',
			'nbsp': ' ',
			'amp': '&',
			'quot': '"'
		};
		return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
			return arrEntities[t];
		});
	}
	import paypass from "@/components/ys-paypass/ys-paypass.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			paypass
		},
		data() {
			return {
				showflex:false,
				redirect_myorder:'',
				payment_result:'',
				xunhuantip:'查询支付结果中...',
				pagList: [],
				orderInfo: '',
				qiyetip: '',
				data: {},
				payType: 2,
				orderInfo: {}
			};
		},
		
		computed: { 
		  ...mapState(['timer']), 
		 
		},
		
		onLoad(options) {
			this.data = JSON.parse(options.data)
			
			
			console.log(this.data)
			
			
			if(this.data.page==='fuyang'){
				this.data.amount=Number(this.data.amount.substring(1,90))
				this.getfuyang()
				return
			}


			
			if (this.data.page != 'zengzhiquan') {
				
				if (Number(this.data.amount)) {
					this.getPayInfo()
				}

				this.payType = 5
			} else {
				this.getfuyang()

			}


		},

		methods: {
			...mapMutations(['settimer']),
			xunhuanget(id){
				///api/order/get_order_state
				let that=this
				that.apiget('/api/order/get_order_state', {id:that.data.id}, true).then(res => {
					if (res.Code == 10200) {
						
						if(res.Data.payment_result==0){
							that.payment_result='查询支付结果中...'
						}else if(res.Data.payment_result==1){
							that.settimer(null)
							that.payment_result='支付成功'
							if(res.Data.redirect_myorder){
								clearInterval(that.xunhuantime)
								that.showflex=false
								if(that.data.enter=='zengzhiquan'){
									uni.navigateTo({
										url: `/pages/wodeyuding/index?backstep=4`
									});
								}else{
									uni.navigateTo({
										url: `/pages/daijinquan/index?backstep=3`
									});
								}
							}else{
								uni.navigateBack({
									delta:1
								})
								
							}
						}else{
							that.settimer(null)
							that.payment_result='支付失败'
							if(res.Data.redirect_myorder){
								clearInterval(that.xunhuantime)
								that.showflex=false
								if(that.data.enter=='zengzhiquan'){
									uni.navigateTo({
										url: `/pages/wodeyuding/index?backstep=4`
									});
								}else{
									uni.navigateTo({
										url: `/pages/cpdmdetail/index?backstep=3`
									});
								}
							}else{
								uni.navigateBack({
									delta:1
								})
								
							}
						}
							
							
						}else{
							that.payment_result=JSON.stringify(res)+'!10200'
						}
				}).catch(err => {
					that.payment_result=JSON.stringify(err)+'error'
					console.log(err)
				})
				
			},
			getfuyang() {

				let that = this
				that.apiget('/api/order/get_stock_payment_info', {
					id: Number(that.data.id)
				}, true).then(res => {
					that.pagList = res.Data
					
					for (let i = 0; i < that.pagList.length; i++) {
						switch (that.pagList[i].name) {
							case '余额支付':
								that.pagList[i].type = '99'
								that.pagList[i].icon = 'icon-qiyezhifu'
								break;
							case '支付宝支付':
								that.pagList[i].type = '2'
								that.pagList[i].icon = 'icon-zhifubao'
								break;
							case '代金券支付':
								that.pagList[i].type = '3'
								that.pagList[i].icon = 'icon-daijinquan'
								break;
							case '产品券支付':

								that.pagList[i].type = '5'
								that.pagList[i].icon = 'icon-qiyezhifu'
								break;
							case '人工通道':
								that.pagList[i].type = '4'
								that.pagList[i].icon = 'icon-rengongtongdao'
								break;
							case '微信支付':
								that.pagList[i].type = '1'
								that.pagList[i].icon = 'icon-weixinfu'
								break;
						}
					}
					
					let filterData=that.pagList.filter(item=>{
						return item.enable
					})
					if(filterData.length==0){
						
						that.payType=''
						
					}else{
						that.payType=filterData[0].type
					}

				}).catch(err => {
					console.log(err)
				})
			},
			getPayInfo() {
				let that = this
				that.apiget('/api/order/get_goods_payment_info', {
					amount: Number(that.data.amount)
				}, true).then(res => {
					that.pagList = res.Data
					

					for (let i = 0; i < that.pagList.length; i++) {
						switch (that.pagList[i].name) {
							case '余额支付':
								that.pagList[i].type = '99'
								that.pagList[i].icon = 'icon-qiyezhifu'
								break;
							case '支付宝支付':
								that.pagList[i].type = '2'
								that.pagList[i].icon = 'icon-zhifubao'
								break;
							case '代金券支付':
								that.pagList[i].type = '3'
								that.pagList[i].icon = 'icon-daijinquan'
								break;
							case '产品券支付':

								that.pagList[i].type = '5'
								that.pagList[i].icon = 'icon-qiyezhifu'
								break;
							case '人工通道':
								that.pagList[i].type = '4'
								that.pagList[i].icon = 'icon-rengongtongdao'
								break;
							case '微信支付':
								that.pagList[i].type = '1'
								that.pagList[i].icon = 'icon-weixinfu'
								break;
						}
					}
					
					let filterData=that.pagList.filter(item=>{
						return item.enable
					})
					if(filterData.length==0){
						
						that.payType=''
						
					}else{
						that.payType=filterData[0].type
					}
				}).catch(err => {
					console.log(err)
				})
			},
			payzhifuquan() {


				let that = this
				if(that.data.page=='cart'){
					that.apipost('/api/order/carts_pay_by_productcoupon', that.data, true).then(res => {
						if (res.Code == 10200) {
							uni.navigateTo({
								url: `/pages/money/paysuccess?page=${that.data.page}`
							});
						}
					}).catch(err => {
						console.log(err)
					})
				}else{
					that.apipost('/api/order/goods_pay_by_productcoupon', that.data, true).then(res => {
						if (res.Code == 10200) {
							uni.navigateTo({
								url: `/pages/money/paysuccess?page=${that.data.page}`
							});
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			payzhifubao(orderInfo) {
				let that = this
				this.orderInfo = orderInfo
				uni.requestPayment({
					//服务提供商 通过uni.getProvider获取
					provider: 'alipay',
					//后台返回的订单数据
					orderInfo: escape2Html(orderInfo),
					//调用成功的回调
					success(res) {
						that.showflex=true
						let timer=setInterval(function(){
							that.xunhuanget()
						},2000)
						
						that.settimer(timer)
						
						// uni.navigateTo({
						// 	url: `/pages/money/paysuccess?page=${that.data.page}`
						// });
					},
					//调用失败的回调
					fail(err) {
						uni.showToast({
							icon: 'none',
							title: '取消支付',
							duration: 2000
						});
						that.orderInfo = JSON.stringify(err)
						console.log('fail:' + err);
					}
				})
			},
			clickzhifubao() {
				let that = this
				switch (that.data.page) {
					case 'cart':
						that.apipost('/api/order/carts_pay_by_alipay', that.data, true).then(res => {
							that.payzhifubao(res.Data)
						}).catch(err => {
							console.log(err)
						})
						break;
					case 'shangpin':
						that.apipost('/api/order/goods_pay_by_alipay', that.data, true).then(res => {
							that.payzhifubao(res.Data)
						}).catch(err => {
							console.log(err)
						})
						break;
					case 'zengzhiquan':
						that.apiget('/api/order/get_stock_pay_sign_by_alipay', that.data, true).then(res => {
							that.payzhifubao(res.Data)
						}).catch(err => {
							console.log(err)
						})
						break;
					case 'fuyang':
						that.apiget('/api/order/stock_suborder_pay_by_alipay', that.data, true).then(res => {
							that.payzhifubao(res.Data)
						}).catch(err => {
							console.log(err)
						})
						break;
				}

			},
			getqiyetongzhifu() {
				let that = this
				that.apipost('/api/home/discount_info', {
					type: that.data.type,
					amount: that.data.amount
				}, true).then(res => {
					if (res.Code == 10200) {
						that.qiyetip = res.Data
					}

				}).catch(err => {
					console.log(err)
				});
			},
			weixinzhifu() {
				let that = this
				if (this.data.type == 1) {
					that.confirm()
				} else {
					if (this.data.page == 'cart') {
						that.apipost('/api/cart/submit', that.data, true).then(res => {
							that.confirm(res.Data.order_id)
						}).catch(err => {
							console.log(err)
						})
						return
					}
					that.apipost('/api/home/order_submit', that.data, true).then(res => {
						if (res.Code == 10200) {
							that.confirm(res.Data.order_id)
						}
					}).catch(err => {
						console.log(err)
					});
				}
			},
			...mapMutations(['setgupiaotuijian']),
			qiyetongzhifu() {
				let that = this
				if (this.data.type == 1) {
					if(this.data.page=='fuyang'){
						that.apipost('/api/order/fuyang_suborder_pay_by_vouchers', that.data, true).then(res => {
							if (res.Code == 10200) {
								
								if(res.Data.redirect_myorder){
									if(that.data.enter=='zengzhiquan'){
										uni.navigateTo({
											url: `/pages/wodeyuding/index?backstep=4`
										});
									}else{
										uni.navigateTo({
											url: `/pages/cpdmdetail/index?backstep=3`
										});
									}
								}else{
									uni.navigateBack({
										delta:1,//返回层数，2则上上页
									})
									
								}
								
						// 		uni.showToast({
						// 			icon: 'none',
						// 			title: '支付成功',
						// 			duration: 2000
						// 		});
						
						// 		uni.navigateTo({
						// 			url: `/pages/money/paysuccess?page=${that.data.page}`
						// 		});
							}
						}).catch(err => {
							console.log(err)
						});
						return
					}
					that.apipost('/api/order/fuyang_pay_by_vouchers', that.data, true).then(res => {
						if (res.Code == 10200) {
							uni.showToast({
								icon: 'none',
								title: '支付成功',
								duration: 2000
							});

							that.setgupiaotuijian(2)
							uni.switchTab({
								url: '/pages/gupiaotuijian/index'
							});
						}
					}).catch(err => {
						console.log(err)
					});
				} else {
					if (this.data.page == 'cart') {
						that.apipost('/api/cart/carts_pay_by_discount', that.data, true).then(res => {
							if (res.Code == 10200) {
								uni.showToast({
									icon: 'none',
									title: '支付成功',
									duration: 2000
								});
								uni.navigateTo({
									url: `/pages/money/paysuccess?page=${that.data.page}`
								});
							}

						}).catch(err => {
							console.log(err)
						})
						return
					}
					that.apipost('/api/home/goods_pay_by_discount', that.data, true).then(res => {
						if (res.Code == 10200) {
							uni.showToast({
								icon: 'none',
								title: '支付成功',
								duration: 2000
							});
							uni.navigateTo({
								url: `/pages/money/paysuccess?page=${that.data.page}`
							});
						}


					}).catch(err => {
						console.log(err)
					});

				}
			},
			submit() {
				if (this.pagList.filter(item => {
						return item.enable
					}).length == 0) {
					uni.showToast({
						icon: 'none',
						title: '支付方式不支持',
						duration: 2000
					});
					return
				}
				switch (Number(this.payType)) {
					case 1:
						this.clickzhifu()
						break;
					case 2:
						this.clickzhifubao()
						break;
					case 3:
						this.$refs.yspay.show()
						break;
					case 4:
						uni.navigateTo({
							url: `/pages/rengongshenhetongdao/index?data=${JSON.stringify(this.data)}`
						});
						break;
					case 5:
						this.$refs.yspay.show()

						break;
					case 99:
						this.$refs.yspay.show()
					
						break;
					default:
						this.clickzhifu()
				}


				//this.$refs.yspay.show();
			},
			cancelpay() {

			},
			submitpay(ex) {
				this.data.pwd = ex.value
				this.clickzhifu()
			},
			paychaxun(data) {
				let that = this

				let orderInfo = {
					provider: 'wxpay',
					"appid": data.appid,
					"noncestr": data.noncestr,
					"package": data.package,
					"partnerid": data.partnerid,
					"prepayid": data.prepayid,
					"timestamp": data.timestamp,
					"sign": data.sign
				}

				uni.requestPayment({
					orderInfo: orderInfo,
					provider: 'wxpay',
					_debug: 1,
					success(res) {

						if (res.errMsg == "requestPayment:ok") {
							//循环查询
							that.showflex=true
							
							let timer=setInterval(function(){
								that.xunhuanget()
							},2000)
							
							that.settimer(timer)
						}
					},
					fail(res) {
						uni.showToast({
							icon: 'none',
							title: '取消支付',
							duration: 2000
						});
						console.log(res, '支付失败');
					}
				})
			},
			//选择支付方式
			changePayType(item) {
				if (item.enable) {
					this.payType = item.type;
				}

			},
			yuezhifu(){
				let that=this
				that.apipost('/api/order/fuyang_suborder_pay_by_vouchers', that.data, true).then(res => {
					if (res.Code == 10200) {
						if(res.Data.redirect_myorder){
							if(that.data.enter=='zengzhiquan'){
								uni.navigateTo({
									url: `/pages/wodeyuding/index?backstep=4`
								});
							}else{
								uni.navigateTo({
									url: `/pages/cpdmdetail/index?backstep=3`
								});
							}
							
						}else{
							uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})
							
						}
						
					}
				}).catch(err => {
					console.log(err)
				})
				
			},
			yuezhifucart(){
				let that=this
				that.apipost('/api/order/carts_pay_by_productcoupon', that.data, true).then(res => {
					if (res.Code == 10200) {
						if(res.Message=='购买成功'){
							uni.navigateTo({
								url: `/pages/shopwrap/shoporder?type=1`
							});
						}else{
							
							
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			yuezhifushangpin(){
				let that=this
				that.apipost('/api/order/goods_pay_by_productcoupon', that.data, true).then(res => {
					if (res.Code == 10200) {
						if(res.Message=='购买成功'){
							uni.navigateTo({
								url: `/pages/shopwrap/shoporder?type=1`
							});
						}else{
							
							
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//确认支付
			clickzhifu() {
				
				let that = this
				if (that.payType == 99&&that.data.page=='shangpin') {
					that.yuezhifushangpin()
					return
				}
				if (that.payType == 99&&that.data.page=='cart') {
					that.yuezhifucart()
					return
				}
				if (that.payType == 99) {
					that.yuezhifu()
					return
				}
				
				
				
				if (that.payType == 99&&that.data.page=='ganggu') {
					that.yueganggu()
					return
				}
				if (that.payType == 5) {
					that.payzhifuquan()
					return
				}
				if (that.payType == 3) {
					that.qiyetongzhifu()
				} else {
					that.weixinzhifu()
				}

			},
			confirm: function(id) {
				let that = this

				if (this.data.type == 1) {
					if(this.data.page=='fuyang'){
						that.apipost(`/api/order/stock_suborder_pay_by_wechat`,{id:that.data.id},true).then(
							res => {
								if (res.Code == 10200) {
									that.paychaxun(res.Data)
						
								}
						
							}).catch(err => {
							console.log(err)
						});
					}else{
						that.apiget(`/api/order/get_stock_pay_sign?id=${that.data.id}&amount=${that.data.amount}`).then(
							res => {
								if (res.Code == 10200) {
									that.paychaxun(res.Data)
						
								}
						
							}).catch(err => {
							console.log(err)
						});
					}
				} else {
					that.apiget(`/api/order/get_sign_info?id=${id}`).then(res => {
						if (res.Code == 10200) {
							that.paychaxun(res.Data)

						}

					}).catch(err => {
						console.log(err)
					});
				}

			},
		}
	}
	//qiyezhifu
</script>

<style lang='scss'>
	.my-alert{
		display:none;
		font-size:44rpx;
		
		justify-content: center;
		align-items: center;
		color:#fff;
		z-index:99999999;
		position:fixed;
		left:auto;
		right:auto;
		top:38%;
		margin-left:200rpx;
		background:rgba(0,0,0,.6);
		width:400rpx;
		height:300rpx;
	}
	.app {
		width: 100%;
	}

	.icon-qiyezhifu {
		background: url(/static/qiyezhifu.png) no-repeat 0 center;
		background-size: 50rpx auto;
	}

	.icon-weixinfu {
		background: url(/static/weixinzhifu.png) no-repeat 0 center;
		background-size: 60rpx auto;
	}

	.icon-rengongtongdao {
		background: url(/static/rengongtongdao.png) no-repeat 0 center;
		background-size: 60rpx auto;
	}

	.icon-daijinquan {
		background: url(/static/daijinquan.png) no-repeat 0 center;
		background-size: 50rpx auto;
	}

	.icon-zhifubao {
		background: url(/static/zhifubao.png) no-repeat 0 center;
		background-size: 50rpx auto;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price {
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;

			&:before {
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	.showflex{
		display:flex!important;
	}
</style>
